<template>
  <div class="product-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>商品管理</span>
          <div class="header-actions">
            <el-input
              v-model="searchText"
              placeholder="搜索商品名称"
              style="width: 200px; margin-right: 10px;"
              clearable
              @keyup.enter="handleSearch"
            >
              <template #append>
                <el-button @click="handleSearch">
                  <el-icon><Search /></el-icon>
                </el-button>
              </template>
            </el-input>
            <el-button type="primary" @click="handleCreate">
              <el-icon><Plus /></el-icon>
              新增商品
            </el-button>
            <el-button @click="handleRefresh">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>
      
      <el-table :data="productList" v-loading="loading" stripe>
        <el-table-column prop="image" label="商品图片" width="100" align="center">
          <template #default="scope">
            <el-image
              :src="scope.row.image"
              fit="cover"
              style="width: 60px; height: 60px; border-radius: 4px;"
              :preview-src-list="[scope.row.image]"
              preview-teleported
            >
              <template #error>
                <div class="image-slot">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        
        <el-table-column prop="name" label="商品名称" min-width="200" show-overflow-tooltip />
        
        <el-table-column prop="price" label="价格" width="100" align="center">
          <template #default="scope">
            <span class="price">¥{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="stock" label="库存" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.stock > 10 ? 'success' : scope.row.stock > 0 ? 'warning' : 'danger'">
              {{ scope.row.stock }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="sales" label="销量" width="100" align="center" />
        
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
              {{ scope.row.status === 'active' ? '上架' : '下架' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button 
              size="small" 
              :type="scope.row.status === 'active' ? 'warning' : 'success'"
              @click="handleToggleStatus(scope.row)"
            >
              {{ scope.row.status === 'active' ? '下架' : '上架' }}
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Plus, Refresh, Picture } from '@element-plus/icons-vue'

const productList = ref([])
const loading = ref(false)
const searchText = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 模拟数据
const mockProducts = [
  {
    _id: '1',
    name: '优AI文化纪念T恤',
    price: 89.00,
    stock: 50,
    sales: 23,
    status: 'active',
    image: 'https://via.placeholder.com/60x60',
    createTime: '2024-01-01T00:00:00.000Z'
  },
  {
    _id: '2',
    name: '文化活动纪念册',
    price: 25.00,
    stock: 5,
    sales: 67,
    status: 'active',
    image: 'https://via.placeholder.com/60x60',
    createTime: '2024-01-02T00:00:00.000Z'
  },
  {
    _id: '3',
    name: '限量版徽章套装',
    price: 45.00,
    stock: 0,
    sales: 156,
    status: 'inactive',
    image: 'https://via.placeholder.com/60x60',
    createTime: '2024-01-03T00:00:00.000Z'
  }
]

const getProductList = async () => {
  loading.value = true
  try {
    // 这里应该调用实际的API
    // const result = await CloudBaseAPI.getProductList(currentPage.value, pageSize.value, searchText.value)
    
    // 模拟API调用
    setTimeout(() => {
      productList.value = mockProducts
      total.value = mockProducts.length
      loading.value = false
    }, 500)
  } catch (error) {
    ElMessage.error('获取商品列表失败')
    loading.value = false
  }
}

const handleSearch = () => {
  currentPage.value = 1
  getProductList()
}

const handleRefresh = () => {
  searchText.value = ''
  currentPage.value = 1
  getProductList()
}

const handlePageChange = () => {
  getProductList()
}

const handleSizeChange = () => {
  currentPage.value = 1
  getProductList()
}

const handleCreate = () => {
  ElMessage.info('新增商品功能开发中...')
}

const handleEdit = (product) => {
  ElMessage.info('编辑商品功能开发中...')
}

const handleToggleStatus = (product) => {
  ElMessage.info('切换商品状态功能开发中...')
}

const handleDelete = (product) => {
  ElMessage.info('删除商品功能开发中...')
}

const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN')
}

onMounted(() => {
  getProductList()
})
</script>

<style scoped>
.product-management {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.price {
  color: #f56c6c;
  font-weight: 600;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 14px;
}
</style>